<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="getTemperatureList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="dateRange" label="日期范围" class="ml-3 mr-3">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="ckbh" label="选择仓库" class="ml-4">
          <a-select
            v-model:value="formState.ckbh"
            allow-clear
            :options="options"
            class="!w-64"
            placeholder="请选择"
            :field-names="{ label: 'ckmc', value: 'ckid' }"
        /></a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="flex justify-end mb-3">
        <a-button>打印</a-button>
      </div>
      <div class="border w-full overflow-auto overflow-x-hidden">
        <div class="flex">
          <div class="w-1/2">
            <div class="flex">
              <div class="w-1/5 h-12 border-r-2 border-b-2"></div>
              <div class="w-4/5 h-12 border-r-2 border-b-2 flex justify-center items-center">上午{{ morning }}点</div>
            </div>
            <div class="flex border-b">
              <div class="title">日期</div>
              <div class="title">温度</div>
              <div class="title">相对湿度</div>
              <div class="title">调控措施</div>
              <div class="w-1/5 border-r-2">
                <div class="title-measure h-[50px]">采取措施后</div>
                <div class="flex">
                  <div class="content-temperature h-[50px]">温度</div>
                  <div class="content-humidity h-[50px]">湿度</div>
                </div>
              </div>
            </div>
            <div v-for="(item, index) in morningList" :key="index" class="flex border-b">
              <div class="content h-[50px]">{{ item.recordDate }}</div>
              <div class="content h-[50px] relative">
                <EditCell title="温度">
                  <a-input v-model:value="item.temperature" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                </EditCell>
              </div>
              <div class="content h-[50px] relative">
                <EditCell title="相对湿度">
                  <a-input v-model:value="item.humidity" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                </EditCell>
              </div>
              <div class="content h-[50px] relative">
                <EditCell title="调控措施">
                  <SelectItem
                    v-model:value="item.measures"
                    mode="multiple"
                    :max-tag-count="1"
                    type="DT00028"
                    placeholder="请选择"
                    allow-clear
                    @change="onSave(item)"
                  />
                </EditCell>
              </div>
              <div class="flex w-1/5">
                <div class="content-measure h-[50px] relative">
                  <EditCell title="措施后温度">
                    <a-input v-model:value="item.temperatureAfter" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                  </EditCell>
                </div>
                <div class="content-measure h-[50px] relative">
                  <EditCell title="措施后湿度">
                    <a-input v-model:value="item.humidityAfter" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                  </EditCell>
                </div>
              </div>
            </div>
          </div>
          <div class="w-1/2">
            <div class="w-full h-12 flex justify-center border-b-2 items-center">下午{{ afternoon }}点</div>
            <div class="flex border-b">
              <div class="title">温度</div>
              <div class="title">相对湿度</div>
              <div class="title">调控措施</div>
              <div class="w-1/5 border-r-2">
                <div class="title-measure h-[50px]">采取措施后</div>
                <div class="flex">
                  <div class="content-temperature h-[50px]">温度</div>
                  <div class="content-humidity h-[50px]">湿度</div>
                </div>
              </div>
              <div class="title">记录人</div>
            </div>
            <div v-for="(item, index) in afternoonList" :key="index" class="flex border-b">
              <div class="content h-[50px] relative">
                <EditCell title="温度">
                  <a-input v-model:value="item.temperature" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                </EditCell>
              </div>
              <div class="content h-[50px] relative">
                <EditCell title="相对湿度">
                  <a-input v-model:value="item.humidity" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                </EditCell>
              </div>
              <div class="content h-[50px] relative">
                <EditCell title="调控措施">
                  <SelectItem
                    v-model:value="item.measures"
                    mode="multiple"
                    :max-tag-count="1"
                    type="DT00028"
                    placeholder="请选择"
                    allow-clear
                    @change="onSave(item)"
                  />
                </EditCell>
              </div>
              <div class="flex w-1/5">
                <div class="content-measure h-[50px] relative">
                  <EditCell title="措施后温度">
                    <a-input v-model:value="item.temperatureAfter" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                  </EditCell>
                </div>
                <div class="content-measure h-[50px] relative">
                  <EditCell title="措施后湿度">
                    <a-input v-model:value="item.humidityAfter" v-input:float.2 placeholder="请输入" @blur="onSave(item)" />
                  </EditCell>
                </div>
              </div>
              <div class="content h-[50px] relative">
                <EditCell>
                  <SelectTable v-model:value="item.empIdRecordName" type="员工" placeholder="请输入" @select="onSelectStaff($event, item)" />
                </EditCell>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import EditCell from '@/components/EditCell'
import { getSystemConfig } from '@/utils/systemConfig'
import { post } from '@/utils/request'
import SelectItem from '@/components/SelectItem'
import useUserStore from '@/store/user'

const { empId, empName } = useUserStore()
const formRef = ref(null)
// const temperature = ref('')
const morning = ref('')
const afternoon = ref('')
const options = ref([])
const morningList = ref([])
const afternoonList = ref([])
const formState = ref({
  dateRange: [dayjs().subtract('7', 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const onSelectStaff = (val, row) => {
  row.empIdRecord = val?.empId
  row.empIdRecordName = val?.empName
  onSave(row)
}

// 获取仓库
const getWarehouseData = async () => {
  const { data } = await post('/operation/opex/getWareHouseInfoList', {
    mcbh: '', //仓库编号/仓库名称
    pageNum: 1,
    pageSize: 999
  })
  options.value = data
  formState.value.ckbh = data[0].ckid
}

const getTemperatureList = async () => {
  const { code, data, msg } = await post('/operation/opex/getKcTemperatureHumidityList', {
    stdate: formState.value.dateRange?.[0],
    eddate: formState.value.dateRange?.[1],
    ckbh: formState.value.ckbh
  })
  if (code !== 0) return message.error(msg)
  data.swList.forEach((item) => {
    item.amTime = `上午${morning.value}点`
    item.empIdRecord = item.empIdRecord ? item.empIdRecord : empId
    item.empIdRecordName = item.empIdRecordName ? item.empIdRecordName : empName
  })
  data.xwList.forEach((item) => {
    item.amTime = `下午${afternoon.value}点`
    item.empIdRecord = item.empIdRecord ? item.empIdRecord : empId
    item.empIdRecordName = item.empIdRecordName ? item.empIdRecordName : empName
  })
  morningList.value = data.swList.map((i) => {
    return {
      ...i,
      measures: i.measures || []
    }
  })
  afternoonList.value = data.xwList.map((i) => {
    return {
      ...i,
      measures: i.measures || []
    }
  })
}

const onSave = (row) => {
  if (!row.empIdRecordName) {
    return message.error('请选择记录人')
  }
  setTimeout(async () => {
    const res = await post('/operation/opex/doSaveKcTemperatureHumidity', { ...row })
    if (res.code !== 0) return message.error(res.msg)
    message.success(res.msg)
    getTemperatureList()
  })
  // if (state === 1) {
  //   rowData.value = morningList.value.find((item) => {
  //     return item.id === row.id
  //   })
  // } else {
  //   rowData.value = afternoonList.value.find((item) => {
  //     return item.id === row.id
  //   })
  // }
  // rowData.value.ckbh = formState.value.ckbh
}

onMounted(async () => {
  await getWarehouseData()
  getTemperatureList()
  morning.value = getSystemConfig('STORE_RECORD_TEMPERATURE_TIME_AM') //仓库记录温湿度的时间_上午
  afternoon.value = getSystemConfig('STORE_RECORD_TEMPERATURE_TIME_PM') //仓库记录温湿度的时间_下午
})
</script>
<style lang="less" scoped>
.title {
  @apply w-1/5 border-r-2 flex items-center pl-3;
}
.title-measure {
  @apply w-full  border-b-2 flex items-center justify-center;
}
.content {
  @apply w-1/5  border-r-2 flex items-center pl-3;
}
.content-measure {
  @apply w-1/2 border-r-2 flex items-center;
}
.content-temperature {
  @apply w-1/2  flex items-center pl-3;
}
.content-humidity {
  @apply w-1/2 border-l-2 flex items-center pl-3;
}
</style>
